import React, {useEffect, useState} from 'react'
import {View,Text} from "@tarojs/components";
import store from "../../../../store";
export default function DiscountNav({navList}){
  const [currDiscountNav,useCurrDiscountNav] = useState(store.getState().currDiscountNav)

  function changeDiscountNav(index) {
    const action = {
      type: 'change_discount_nav',
      index
    }
    store.dispatch(action)
  }

  useEffect(() => {
    store.subscribe(stateChange)
  },[])

  // 监听全局数据改变
  function stateChange(){
    useCurrDiscountNav(store.getState().currDiscountNav)
  }

  return (
      <View className='discount_nav'>
        {
          navList.map((item,index) => {
            return (
              <View className='nav_item' key={index}>
                <Text className={index === currDiscountNav? 'isDiscountNav': ''} onClick={() => {changeDiscountNav(index)}}>
                  {item.text}
                </Text>
              </View>
            )
          })
        }
      </View>
  )
}
